<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="/static/css/admin/bootstrap.min14ed.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/admin/font-awesome.min93e3.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/admin/plugins/dataTables/dataTables.bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/admin/animate.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/admin/style.min862f.css"/>
    <link href="/static/css/admin/admincommon.css?v=20180820" rel='stylesheet' type='text/css'/>
</head>
<body>
<style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    .think_default_text {
        padding: 4px 48px;
    }

    a {
        color: #2E5CD5;
        cursor: pointer;
        text-decoration: none
    }

    a:hover {
        text-decoration: underline;
    }

    body {
        background: #fff;
        font-family: "Century Gothic", "Microsoft yahei";
        color: #333;
        font-size: 18px
    }

    h1 {
        font-size: 100px;
        font-weight: normal;
        margin-bottom: 12px;
    }

    p {
        line-height: 1.6em;
        font-size: 42px
    }

    .content {
        padding: 24px 48px;
    }

    .p-class {
        font-size: 20px
    }

    .main {
        width: 100%;
    }

    .cell {
        width: 25%;
        float: left;
        height: 200px;
    }

    .select-box {
        border: solid 1px #ddd;
        box-sizing: border-box;
        vertical-align: middle;
        width: 20%;
        display: inline-block
    }

    .select {
        border: solid 1px #ddd;
        box-sizing: border-box;
        cursor: pointer;
        line-height: normal;
        font-weight: normal;
        width: 100%;
        white-space: nowrap
    }

    .select-box .select {
        border: none
    }

    .select-box.inline, .select-box.inline .select {
        width: auto
    }

    .select-box, .select-box.size-M {
        padding: 4px 5px
    }

    .select, .size-M .select {
        font-size: 14px
    }

    .select-box.size-MINI {
        padding: 0px 5px
    }

    .size-MINI .select {
        font-size: 12px
    }

    .select-box.size-S {
        padding: 3px 5px
    }

    .size-S .select {
        font-size: 12px
    }

    .select-box.size-L {
        padding: 8px 5px
    }

    .size-L .select {
        font-size: 16px
    }

    .select-box.size-XL {
        padding: 10px 5px
    }

    .size-XL .select {
        font-size: 18px
    }

    @media (max-width: 767px) {
        .responsive .select-box {
            border: none
        }

        .responsive .select-box .select,
        .responsive .select {
            border: solid 1px #ddd;
            padding: 10px;
            font-size: 16px
        }

        .responsive .select-box,
        .responsive .select-box.size-M,
        .responsive .select-box.size-MINI,
        .responsive .select-box.size-S,
        .responsive .select-box.size-L,
        .responsive .select-box.size-XL {
            height: auto;
            padding: 0
        }
    }
</style>

<div style="padding: 24px 48px;">
    <p>
        <span style="font-size:30px">DNFT管理后台</span>
    </p>
</div>

<div class="start_data" style="margin-left: 40px;">
    <button type="submit" class="btn btn-xm btn-primary" id="today">
        <a href="javascript:;" data-id="1"
           class="font-bold source" style="text-decoration:none;">今日</a>
    </button>
    <button type="submit" class="btn btn-xm btn-gray" id="total">
        <a href="javascript:;" data-id="2"
           class="font-bold source" style="text-decoration:none;">累计</a>
    </button>
</div>

<div class="main">
    <div class="cell c1">
        <div class="content">
            <p class="p-class">
                开蛋数(个)：
                <if condition="$data['type'] eq 1">
                    {$data['today_egg']}
                    <else/>
                    {$data['total_egg']}
                </if>
            </p>
            <p class="p-class">
                金蛋(个)：
                <if condition="$data['type'] eq 1">
                    {$data['new_golden_egg']}
                    <else/>
                    {$data['total_golden_egg']}
                </if>
            </p>
            <p class="p-class">
                银蛋(个)：
                <if condition="$data['type'] eq 1">
                    {$data['new_silver_egg']}
                    <else/>
                    {$data['total_sliver_egg']}
                </if>
            </p>
        </div>
    </div>
    <div class="cell c2">
        <div class="content">
            <p class="p-class">
                战斗数(次)：
                <if condition="$data['type'] eq 1">
                    {$data['today_fight']}
                    <else/>
                    {$data['total_fight']}
                </if>
            </p>
            <p class="p-class">
                金币效率：
                <if condition="$data['type'] eq 1">
                    {$data['today_rate']}
                    <else/>
                    {$data['total_rate']}
                </if>
            </p>
        </div>
    </div>
    <div class="cell c3">
        <div class="content">
            <p class="p-class">
                新增地址数(个)：
                <if condition="$data['type'] eq 1">
                    {$data['new_user']}
                    <else/>
                    {$data['total_user']}
                </if>
            </p>
            <p class="p-class">
                部落出币量(INGold)：
                <if condition="$data['type'] eq 1">
                    {$data['today_coin']}
                    <else/>
                    {$data['total_coin']}
                </if>
            </p>
        </div>
    </div>
    <div class="cell c4">
        <div class="content">
            <p class="p-class">
                集市交易量(笔)：
                <if condition="$data['type'] eq 1">
                    {$data['today_count']}
                    <else/>
                    {$data['total_count']}
                </if>
            </p>
            <p class="p-class">
                集市交易金额：
                <if condition="$data['type'] eq 1">
                    {$data['today_amount']}
                    <else/>
                    {$data['total_amount']}
                </if>
            </p>
        </div>
    </div>
</div>

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <div class="ibox-tools">
                        <a href="javascript:location.replace(location.href);" class="btn btn-primary btn-circle"
                           type="button" style="margin-bottom:0px;margin-right:10px;position:relative;top:-5px;"
                           title="刷新">
                            <i class="fa fa-refresh"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <form action="" method="post">
                        <div class="form-group col-sm-3" style="padding-left:0px;">
                            <input class="form-control" type="text" name="day_time" id="day_time"
                                   value="" autocomplete="off" placeholder="">
                        </div>
                        <span class="select-box">
                            <select class="select" size="1" name="type">
                                <option
                                <?php if($data['egg_type'] == 2) echo "selected"; ?> value="2">开蛋数</option>
                                <option
                                <?php if($data['egg_type'] == 1) echo "selected"; ?> value="1">金蛋</option>
                                <option
                                <?php if($data['egg_type'] == 0) echo "selected"; ?> value="0">银蛋</option>
                            </select>
                        </span>
                        <button type="submit" class="btn btn-xm btn-primary">搜索</button>
                    </form>
                    <div id="main" style="width: 100%;height:400px;"></div>
                </div>

                <div class="ibox-content">
                    <form action="" method="post">
                        <div class="form-group col-sm-3" style="padding-left:0px;">
                            <input class="form-control" type="text" name="fight_day_time" id="rate"
                                   value="" autocomplete="off" placeholder="">
                        </div>
                        <button type="submit" class="btn btn-xm btn-primary">搜索</button>
                    </form>
                    <div id="hybrid" style="width: 100%;height:400px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<js href="/static/js/admin/jquery.min.js"/>
<js href="/static/js/admin/bootstrap.min.js"/>
<js href="/static/js/admin/echarts.js"/>
<!--<js href="/static/css/layui/layui.js"/>-->
<js href="/static/js/admin/laydate.js"/>

<script>
    $(".start_data").on('click', '.source', function () {
        var id = $(this).data("id");
        if (id == 1) {
            $("#today").removeClass('btn-gray').addClass('btn-primary');
            $("#total").removeClass('btn-primary').addClass('btn-gray');
        } else {
            $("#today").removeClass('btn-primary').addClass('btn-gray');
            $("#total").removeClass('btn-gray').addClass('btn-primary');
        }
        $(location).attr('href', "{:url('admin/index/welcome')}?id=" + id);
    });

    var id_type = {$id};
    if (id_type == 1) {
        $("#today").removeClass('btn-gray').addClass('btn-primary');
        $("#total").removeClass('btn-primary').addClass('btn-gray');
    } else {
        $("#today").removeClass('btn-primary').addClass('btn-gray');
        $("#total").removeClass('btn-gray').addClass('btn-primary');
    }

    laydate.render({
        elem: '#day_time', //指定元素
        range: true
    });

    laydate.render({
        elem: '#rate', //指定元素
        range: true
    });

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        legend: {
            data: ['数量']
        },
        xAxis: {
            type: 'category',
            data: {$data['date_list']}
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: {$data['num_list']},
                type: 'line',
                smooth: true
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);


    // 基于准备好的dom，初始化echarts实例
    var hybridChart = echarts.init(document.getElementById('hybrid'));

    // 指定图表的配置项和数据
    hybridOption = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        legend: {
            data: ['战斗数(次)', '金币效率']
        },
        xAxis: [
            {
                type: 'category',
                data: {$data['fight_date_list']},
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '战斗数(次)',
                axisLabel: {
                    formatter: '{value}'
                }
            },
            {
                type: 'value',
                name: '金币效率',
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: [
            {
                name: '战斗数(次)',
                type: 'bar',
                data: {$data['fight_num_list']},
            },
            {
                name: '金币效率',
                type: 'line',
                yAxisIndex: 1,
                data: {$data['rate_num_list']},
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    hybridChart.setOption(hybridOption);


    function searchTitle(obj) {
        var keywords = $.trim($(obj).val());

        if (keywords.length <= 0) {
            window.location.replace(location.href);
        }
    }
</script>
</body>

</html>